import React from "react";

function Lesson({ stage, title }) {
  return (
    <div>
      {stage} - {title}
    </div>
  );
}

const lessons = [
  { stage: "aaaa", title: "aaaaaaa" },
  { stage: "bbbb", title: "bbbbbbb" },
  { stage: "cccc", title: "ccccccc" },
  { stage: "dddd", title: "ddddddd" },
];

//定义一个名为widthCountent的高阶组件
//我们的需求是：包装后的组件传入参数，然后根据该参数来获取并显示数据
const widthCountent = (Comp) => (props) => {
  const content = lessons[props.idx];
  return <Comp {...content} />;
};

// 上方代码与下方代码同效
// function widthCountent(Comp) {
//   return function (props) {
//     const content = lessons[props.idx];
//     return <Comp {...content} />;
//   };
// }

// widthLog 高阶组件，能够在组件挂载时输出日志
const widthLog = (Comp) => {
  return class extends React.Component {
    componentDidMount() {
      console.log("didMount", this.props);
    }

    render() {
      return <Comp {...this.props}></Comp>;
    }
  };
};

const LessonWidthCount = widthLog(widthCountent(Lesson));

const Hottest = () => {
  return (
    <div>
      {[0, 1, 2, 3].map((el, idx) => (
        <LessonWidthCount key={idx} idx={idx} />
      ))}
    </div>
  );
};

export default Hottest;
